XMLHttpRequest file upload

[nadda]

Добрый день.
Помогите плз решить такую проблемку.
Имеется форма, поля которой формируются динамически, и обрабатываются JS. Проблем небыло пока не понадобилось добавить поле типа файл. Как ни бился - не смог загрузить файл на сервер. Буду очень благодарен за подсказку. Вот скрипт - обработчик формы:

function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
    request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();

function sendForm(){
var len = document.my_form.elements.length-1;
var formFields = [];
for (var i = 0; i < len; i++) {
     var val = document.zay_form.elements[i].value;
     var key = document.zay_form.elements[i].name;
     formFields.push(key + '=' + val);
}
http.open("POST", '', true);
http.onreadystatechange = echoResponse;
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.send(formFields.join('&'));
}

и сама форма:

<form action="" name="my_form" onsubmit="sendForm(this.name);return false;">
<input name="action" type="hidden" value="new" />
<input name="f_1" type="text" value="1" />
<input name="f_2" type="text" value="2" />
<input name="f_3" type="text" value="3" />
<input type="file" name="my_file" />
<button type="submit">OK</button>
</form>

Спасибо

[Safort]

А что, собственно, выдают вкладки "консоль" и "сеть" в браузере? Есть какие-то ошибки и на тот ли адрес отправляются данные?

[nadda]

Если без инпута файл, то вываливается пост-массив... ну как и полагается....

[melky]

вкратце - используйте FormData. это очень просто. гугл расскажет, вместе со сниппетами. удачи!

[nadda]

я пробовал использовать formData, но почему-то вместо пост-массива получаю полный вид страницы с которой отправлена форма.

[Malleys]

Форма должна содержать следующие параметры: method="post" enctype="multipart/form-data" . Она определяет, какой тип содержимого использовать при отправке формы
Если в форме <input type="file" name="my_file" /> , то на сервере этот файл доступен не через $_POST['my_file'] , а через $_FILES['my_file']

[nadda]

естественно... вот код приемника:

print_r($_POST);
        if($_FILES){
            print_r($_FILES);
        }

причем если форму отправить как обычно, с перезагрузкой, то все прекрасно работает....

[Malleys]

Файл загружается на сервер без перезагрузки страницы.

<form method="post" enctype="multipart/form-data" action="" target="upload_target">
  <input name="action" type="hidden" value="new" />
  <input name="f_1" type="text" value="1" />
  <input name="f_2" type="text" value="2" />
  <input name="f_3" type="text" value="3" />
  <input type="file" name="my_file" />
  <button type="submit">OK</button>
  <iframe id="upload_target" name="upload_target" src="" style="width: 0; height: 0; border: none;"></iframe>
</form>

Здесь onsubmit не надо.

[nice_try]

Файл летит вместе с остальными данными

$form = $("#con");
 $form.on("submit", function() {
var formData = new FormData($(this)[0]);
 $.ajax({
                url: window.location.pathname,
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                    alert(data)
                },
                cache: false,
                contentType: false,
                processData: false
});
 return false;
});

[nerv_]

var formData = new FormData($(this)[0]);

Гениально! Обернуть this для того, чтобы потом его извлечь! jQuery головного мозга